<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        body > div {
            width: 1200px;
            margin: 0 auto;
        }
        ul > li {
            list-style: none;
        }
        .header, .footer {
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 100px;
            background-color: skyblue;
            color: #fff;
        }
        .container > ul {
            width: 100%;
            padding-top: 10px;
            overflow: hidden;
        }
        .container > ul > li {
            float: left;
            width: calc(100% / 5 - 10px - 2px);
            margin: 0 5px 10px;
            border: 1px solid #333;
            height: 300px;
        }
        .container > ul > li > .img {
            margin: 30px auto;
            width: 150px;
        }
        img {
            width: 100%;
            height: 100%;
            display: block;
        }
        li p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .loading {
            position: relative;
            height: 100px;
            display: none;
        }
        .loading.active {
            display: block;
        }
        .loading > img {
            width: 200px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="container">
        <ul>
            <!-- <li>
                <div class="img">
                    <img src="https://img10.360buyimg.com/seckillcms/s140x140_jfs/t1/142603/25/28046/22057/62eb6f93Ec2849b16/0b9b849ca51578e7.jpg.webp" alt="">
                </div>
                <p>描述</p>
                <span>1234.00</span>
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li> -->
        </ul>
    </div>
    <div class="loading">
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.cbd067b8c2e7cea8c9ed68751dc6ee21?rik=LukJ60mbXpNnwg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f015ae6568f4d2732f87574be749350.gif&ehk=KgMQGBUuSWdrcaGh9Uv2ZR%2bzGblfDh2aZOy8XRTBz9k%3d&risl=&pid=ImgRaw&r=0" alt="">
    </div>
    <div class="footer">底部</div>
    <script src="./utils.js"></script>
    <script>
        /**
         * 下拉刷新分页渲染
         * 代码实现
         * 1. 获取元素和数据
         *  ul 向里面插入数据
         *  屏幕的高度
         *  ul 的 offsetTop
         * 2. 拆数组渲染第一页
         *  准备一个函数
         *  里面拆+渲染
         * 3. 判断 ul 的底部进来了
         * 当 屏幕的高+浏览器卷去的高 >= ul 的 offsetTop + ul 的 高
         *  不能一开始就获取高
         * 4. 加载下一页时
         * 出现问题
         *  滚动一次加载太多
         * 分析
         *  在滚动的那一瞬间可能会触发多次滚动事件
         * 解决
         *  准备一个开关，在 window.scroll 事件里面判断
         *  开关开启就加载，关闭就不加载
         *  bindHtml 里面开启
         * 5. loading 效果
         * 要加载下一页的时候，
         *  先让 loading 盒子出来，1000ms 后渲染，渲染结束后让 loading 盒子消失
        */
       // data
        var data = []
        var str1 = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨'
        var str2 = '一二三四五六七八九十'
        for (var i = 0; i < 129; i++) {
            data.push({
                // id: i + 1,
                goods_big_logo: 'https://img10.360buyimg.com/seckillcms/s140x140_jfs/t1/142603/25/28046/22057/62eb6f93Ec2849b16/0b9b849ca51578e7.jpg.webp',
                goods_name: str1[rangeRandom(0, 15)] + str2[rangeRandom(0, 9)],
                goods_price: rangeRandom(129, 49129)
            })
        }
        // 1.
        var listBox = document.querySelector('.container > ul')
        var windowHeight = document.documentElement.clientHeight
        var ulOffsetTop = listBox.offsetTop
        var loading = document.querySelector('.loading')

        var totlePage = Math.ceil(data.length / 20)     // 总共多少页
        var currentPage = 1                             // 当前页
        var flag = false                                // 开关 
        // 2.
        function bindHtml() {
            var bindList = data.slice((currentPage - 1) * 20, currentPage * 20)
            var str = ''
            var frg = document.createDocumentFragment()
            bindList.forEach(function (item) {
                var li = document.createElement('li')
                // str += `
                li.innerHTML = `
                <li>
                    <div class="img">
                        <img src="${ item.goods_big_logo }" alt="">
                    </div>
                    <p>${ item.goods_name }</p>
                    <span>￥${ item.goods_price.toFixed(2).big().fontcolor('red') }</span>
                </li>
                `
                frg.appendChild(li)
            })
            listBox.appendChild(frg)
            // listBox.innerHTML = str
            flag = true

            loading.classList.remove('active')
        }
        bindHtml()
        // 3. 滚动事件
        window.onscroll = function () {
            var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + windowHeight
            // ul 的高
            var ulHeight = listBox.offsetHeight + listBox.offsetTop

            // 4. 问题
            // if (currentPage === totlePage) return
            // currentPage++
            // bindHtml()
            // 4. 分析
            // if (scrollTop >= ulHeight) {
            //     console.log('++', '加载下一页', 'bindHtml()')
            // }
            if (scrollTop < ulHeight) return
            if (currentPage === totlePage) return
            if (!flag) return
            flag = false

            loading.classList.add('active')

            setTimeout(function () {
                currentPage++
                bindHtml()
            }, 1000)
        }
    </script>
</body>
</html>